<template>
	<div class="system-role-dialog-container">
		<el-dialog title="订单改价" v-model="state.dialog.isShowDialog" width="500px">
			<el-form ref="deliverGoodDialogFormRef" :model="state.ruleForm"  label-width="120px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="订单编号：">
							<span>{{ state.ruleForm.orderId }}</span>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="订单金额：">
							<el-input v-model="state.ruleForm.orderPrice" @input="onVerifyNumberComma1($event)" placeholder="请输入订单金额">
								<template #append>元</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="运费：">
							<el-input v-model="state.ruleForm.totalPostage" @input="onVerifyNumberComma2($event)" placeholder="请输入运费金额">
								<template #append>元</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel"  >取 消</el-button>
					<el-button type="primary" @click="onSubmit"  >确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemRoleDialog">
import { reactive, ref } from 'vue';
import { orderUpdatePrice } from '/@/api/order';
import {
	verifyNumberComma,
} from '/@/utils/toolsValidate';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const deliverGoodDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		id:'',
		orderId: '', // 订单编号
		orderPrice: 0.00, // 订单价格
		totalPostage: 0.00, // 运费
	},
	dialog: {
		isShowDialog: false,
	},
});

// 打开弹窗
const openDialog = (param: any) => {
	if (param != null) {
		state.ruleForm.id = param.orderNo;
		state.ruleForm.orderId = param.snkey;
		state.ruleForm.orderPrice = param.totalPay;
		state.ruleForm.totalPostage = param.totalPostage;
	}
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
const onVerifyNumberComma1 = (val: string) => {
	state.ruleForm.orderPrice = verifyNumberComma(val);
};
const onVerifyNumberComma2 = (val: string) => {
	state.ruleForm.totalPostage = verifyNumberComma(val);
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = async() => {
	let params = {
		orderNo: state.ruleForm.id,
		payPrice: state.ruleForm.orderPrice,
		payPostage:state.ruleForm.totalPostage
	}
	let res = await orderUpdatePrice(params);
	console.log(res.method)
	if(res.method == 'success'){
		closeDialog();
		emit('refresh');
	}
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>
